<template>
  <view class="learning-masonry">
    <view class="header">
      <text class="title">探索学习内容</text>
      <view class="tabs">
        <view v-for="tab in tabs" :key="tab.value" class="tab" :class="{ active: activeTab === tab.value }"
          @tap="setActiveTab(tab.value)">
          {{ tab.label }}
        </view>
      </view>
    </view>

    <view class="masonry-grid">
      <!-- 左列 -->
      <view class="masonry-column">
        <template v-for="item in leftColumnItems" :key="item.id">
          <ProfileHeader v-if="item.type === 'profile'" v-bind="item" />
          <FeaturedCourseCard v-else-if="item.type === 'featured'" v-bind="item" />
          <VideoCard v-else-if="item.type === 'video'" v-bind="item" />
          <CourseCard v-else-if="item.type === 'course'" v-bind="item" />
          <ResourceCard v-else-if="item.type === 'resource'" v-bind="item" />
          <ProjectCard v-else-if="item.type === 'project'" v-bind="item" />
        </template>
      </view>

      <!-- 右列 -->
      <view class="masonry-column">
        <template v-for="item in rightColumnItems" :key="item.id">
          <ProfileHeader v-if="item.type === 'profile'" v-bind="item" />
          <FeaturedCourseCard v-else-if="item.type === 'featured'" v-bind="item" />
          <VideoCard v-else-if="item.type === 'video'" v-bind="item" />
          <CourseCard v-else-if="item.type === 'course'" v-bind="item" />
          <ResourceCard v-else-if="item.type === 'resource'" v-bind="item" />
          <ProjectCard v-else-if="item.type === 'project'" v-bind="item" />
        </template>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import ProfileHeader from './ProfileHeader.vue';
import FeaturedCourseCard from './cards/FeaturedCourseCard.vue';
import VideoCard from './cards/VideoCard.vue';
import CourseCard from './cards/CourseCard.vue';
import ResourceCard from './cards/ResourceCard.vue';
import ProjectCard from './cards/ProjectCard.vue';

const activeTab = ref('all');

const tabs = [
  { value: 'all', label: '全部' },
  { value: 'courses', label: '课程' },
  { value: 'videos', label: '视频' },
  { value: 'resources', label: '资源' }
];

const setActiveTab = (tab) => {
  activeTab.value = tab;
};

// 模拟数据
const items = ref([
  {
    id: 1,
    type: 'featured',
    title: 'AIGC基础入门',
    subtitle: '第一章：AI模型训练与优化',
    progress: 68,
    image: "https://imagecgr.oss-cn-beijing.aliyuncs.com/ai.png",
    tags: ['热门课程'],
    instructor: '张教授',
    isOnline: true,
  },
  {
    id: 2,
    type: 'video',
    title: 'AI模型训练实战演示',
    duration: '18:42',
    views: '2.4k',
    thumbnail: "https://imagecgr.oss-cn-beijing.aliyuncs.com/daolun.png",
    instructor: {
      name: '李教授',
      avatar: '/static/img/user-avatar.png',
    },
    isNew: true,
  },
  {
    id: 3,
    type: 'course',
    title: 'AI模型微调技术',
    description: '掌握最新的AI模型微调方法，提升模型性能',
    progress: 30,
    image: "https://imagecgr.oss-cn-beijing.aliyuncs.com/fengm.png",
    tags: ['进阶', '实战'],
    chapters: 8,
    completed: 2,
    duration: 360,
  },
  {
    id: 4,
    type: 'project',
    title: 'AI图像生成',
    description: '使用扩散模型创建自定义图像生成器',
    progress: 45,
    dueDate: '2023-12-15',
    collaborators: 3,
    color: 'purple',
  },
  {
    id: 5,
    type: 'resource',
    title: 'AI训练数据集精算',
    resourceType: '数据',
    downloads: 1280,
    size: '2.4GB',
    color: 'emerald',
  },
  {
    id: 6,
    type: 'video',
    title: '如何评估AI模型性能',
    duration: '12:18',
    views: '1.8k',
    thumbnail: "https://imagecgr.oss-cn-beijing.aliyuncs.com/jiegou.jpg",
    instructor: {
      name: '王教授',
      avatar: '/static/img/user-avatar.png',
    },
  },
  // {
  //   id: 7,
  //   type: 'course',
  //   title: '生成式AI应用开发',
  //   description: '从零开始构建生成式AI应用，实现创意到产品的转化',
  //   progress: 0,
  //   tags: ['高级', '项目'],
  //   chapters: 6,
  //   completed: 0,
  //   duration: 270,
  // },
  {
    id: 8,
    type: 'resource',
    title: 'AI模型部署最佳实践指导',
    resourceType: '电子文档',
    downloads: 3450,
    size: '8.5MB',
    color: 'blue',
  },
  // {
  //   id: 9,
  //   type: 'video',
  //   title: '大语言模型原理解析',
  //   duration: '24:15',
  //   views: '5.7k',
  //   instructor: {
  //     name: '赵教授',
  //   },
  //   isNew: true,
  // },
  {
    id: 10,
    type: 'project',
    title: '智能聊天机器人',
    description: '基于大语言模型构建个性化聊天助手',
    progress: 75,
    dueDate: '2023-11-30',
    collaborators: 2,
    color: 'teal',
  },
  {
    id: 11,
    type: 'course',
    title: 'AI创意写作与内容生成',
    description: '探索AI在创意写作和内容创作中的应用',
    progress: 0,
    tags: ['创意', '新课'],
    chapters: 4,
    completed: 0,
    duration: 180,
    locked: true,
  },
  {
    id: 12,
    type: 'resource',
    title: 'AI伦理与隐私保护白皮书',
    resourceType: 'PDF',
    downloads: 2180,
    size: '4.2MB',
    color: 'rose',
  },
]);

// 根据activeTab过滤项目
const filteredItems = computed(() => {
  if (activeTab.value === 'all') return items.value;

  const typeMap = {
    'courses': 'course',
    'videos': 'video',
    'resources': 'resource'
  };

  return items.value.filter(item => item.type === typeMap[activeTab.value]);
});

const leftColumnItems = computed(() => {
  return filteredItems.value.filter((_, index) => index % 2 === 0);
});

const rightColumnItems = computed(() => {
  return filteredItems.value.filter((_, index) => index % 2 === 1);
});
</script>

<style scoped>
.learning-masonry {
  width: 100%;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
}

.tabs {
  display: flex;
  height: 32px;
  background-color: rgba(241, 245, 249, 0.8);
  border-radius: 8px;
  overflow: hidden;
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  margin: 2px;
  font-size: 12px;
  border-radius: 6px;
  color: #64748b;
}

.tab.active {
  background-color: #3b82f6;
  color: white;
}

.masonry-grid {
  display: flex;
  width: 100%;
  gap: 16px;
}

.masonry-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>
